<template>
  <!-- 菜单 -->
  <div class="header">
    <div class="nav-list">
      <template v-for="(navItem, index) in nav" :key="navItem">
        <div class="nav-item">
          <router-link
            active-class="nav-item-title_active"
            class="nav-item-title"
            :to="{ name: navItem.rote }"
          >
            {{ navItem.name }}
          </router-link>

          <div class="menu-list" v-if="navItem.children?.length">
            <template v-for="menuItem in navItem.children" :key="menuItem">
              <a
                target="_blank"
                class="menu-item"
                :href="menuItem.linkurl"
                v-if="menuItem.linkurl"
              >
                {{ menuItem.name }}
              </a>
              <router-link
                class="menu-item"
                active-class="menu-item_active"
                :to="{ name: menuItem.rote }"
                v-else
              >
                {{ menuItem.name }}
              </router-link>
            </template>
          </div>
        </div>

        <img
          v-if="Math.floor((nav.length - 1) / 2) == index"
          class="nav-item_logo"
          src="@/assets/image/header/logo.png"
        />
      </template>
    </div>

    <div class="tool">
      <!-- 搜索 -->
      <div class="tool-item">
        <router-link to="/search">
          <img class="search" src="@/assets/image/header/ic_search.png" />
        </router-link>
      </div>
      <!-- 网站导航 -->
      <div class="tool-item siteMap">
        <img class="siteMap-icon" src="@/assets/image/header/ic_nav.png" />
        <!--  -->
        <div class="siteMap-nav">
          <div class="siteMap-nav-header">
            <div class="siteMap-nav-title">网站地图</div>
          </div>
          <div class="siteMap-nav-list">
            <div
              class="siteMap-nav-item"
              v-for="navItem in nav"
              :key="navItem.id"
            >
              <router-link
                class="siteMap-nav-item-title"
                active-class="siteMap-nav-item-title_active"
                :to="{ name: navItem.rote }"
              >
                {{ navItem.name }}
              </router-link>
              <div class="siteMap-menu" v-if="navItem.children?.length">
                <template
                  v-for="menuItem in navItem.children"
                  :key="menuItem.id"
                >
                  <a
                    target="_blank"
                    class="siteMap-menu-item"
                    :href="menuItem.linkurl"
                    v-if="menuItem.linkurl"
                  >
                    {{ menuItem.name }}
                  </a>
                  <router-link
                    class="siteMap-menu-item"
                    active-class="siteMap-menu-item_active"
                    :to="{ name: menuItem.rote }"
                    v-else
                  >
                    {{ menuItem.name }}
                  </router-link>
                </template>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState("common", ["nav"]),
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.header {
  position: relative;
  width: 1200px;
  margin: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  display: flex;

  .nav {
    // 导航
    &-list {
      justify-content: space-between;
      align-items: center;
      height: 80px;
      width: 1200px;
      padding: 0 100px;
      box-sizing: border-box;
      display: flex;
      position: relative;
    }

    &-item {
      flex: 1 0;
      justify-content: center;
      align-items: center;
      display: flex;
      height: 100%;
      padding: 0 10px;
      position: relative;

      &:hover &-title {
        color: color.$base;
      }

      &-title {
        font-size: 20px;
        color: #9c9b9a;

        &_active {
          color: color.$base;
        }
      }

      &_logo {
        width: 200px;
        height: 43px;
        object-fit: contain;
      }
    }

    // 导航操作
    &-item:hover .menu-list {
      opacity: 1;
      pointer-events: initial;
    }
  }

  // 菜单
  .menu {
    &-list {
      position: absolute;
      width: 240px;
      padding-top: 13px;
      top: calc(100% - 13px);
      left: 50%;
      transform: translateX(-50%);
      z-index: 1001;
      background-image: url("@/assets/image/header/arrow.png");
      background-position-x: center;
      background-position-y: 0%;
      background-repeat: no-repeat;
      transition: 400ms all;
      opacity: 0;
      pointer-events: none;
    }

    &-item {
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      height: 82px;
      border-bottom: 1px solid #eee;
      font-size: 16px;

      &_active {
        color: color.$base;
      }

      &:first-of-type {
        border-top: 2px solid color.$base;
      }

      &:last-of-type {
        border-bottom: 2px solid color.$base;
      }

      &:hover {
        background-color: color.$base;
        color: #fff;
      }
    }
  }

  // 右侧工具栏
  .tool {
    display: flex;
    position: absolute;
    z-index: 1001;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    width: 90px;

    &-item {
      width: 45px;
      height: 45px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  // 搜索
  .search {
    @include fn.cover;
  }

  // 网站地图
  .siteMap {
    &-icon {
      width: 30px;
      height: 30px;
      display: block;
      cursor: pointer;
    }

    &-nav {
      width: 630px;
      background-color: #fff;
      position: absolute;
      z-index: 1001;
      // top: calc(100% - 13px);
      top: calc(100%);
      right: 0;

      padding-top: 13px;
      background-image: url("@/assets/image/header/arrow.png");
      background-position-x: calc(100% - 10px);
      background-position-y: 0%;
      background-repeat: no-repeat;
      transition: 400ms all;
      opacity: 0;
      pointer-events: none;

      &-header {
        background-color: color.$base;
        color: #fff;
        height: 80px;
        display: flex;
        align-items: center;
        padding: 0 40px;
        font-size: 20px;
        color: #fff;
      }

      &-item {
        padding: 20px 40px;
        border-bottom: 1px solid #eee;

        &-title {
          font-size: 20px;

          &:hover {
            color: color.$base;
          }

          &_active {
            color: color.$base;
          }
        }
      }
    }

    &-menu {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin: 5px -10px;

      &-item {
        font-size: 16px;
        color: #999;
        margin: 5px 10px;

        &:hover {
          color: color.$base;
        }

        &_active {
          color: color.$base;
        }
      }
    }
  }

  .siteMap:hover .siteMap-nav {
    opacity: 1;
    pointer-events: initial;
  }
}
</style>